<template>
	<view>
		<view class="invest-text">代购金额</view>
		<view class="input-box">
			<text>￥</text>
			<input v-model="money" @input="input" placeholder="输入代购金额" />
		</view>
		<view class="quick">快捷代购</view>
		<view class="quick-item">
			<view class="list" :class="{'list-after':show==300}" @click="choise(300)">￥300</view>
			<view class="list" :class="{'list-after':show==600}" @click="choise(600)">￥600</view>
			<view class="list" :class="{'list-after':show==900}" @click="choise(900)">￥900</view>
			<view class="list" :class="{'list-after':show==1800}" @click="choise(1800)">￥1800</view>
		</view>
		<view class="invest-style">代购方式</view>
		<view class="bankcard" @click="checkCard" :class="{'queren-after':unzfb==true}">
			<image src="../../static/pay/card.png" mode="widthFix"></image>
			<view class="card">银行卡</view>
			<!-- <view class="check" v-if="uncheck"></view>
			<view class="check" v-else>
				<image style="width: 26rpx;" src="../../static/pay/check-card.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="zfb" @click="checkZfb" :class="{'queren-after':uncheck==true}">
			<image src="../../static/pay/zhifubao.png" mode="widthFix"></image>
			<view class="zfb-pay">支付宝支付</view>
			<!-- <view class="check-zfb" v-if="unzfb"></view>
			<view class="check-zfb" v-else>
				<image style="width: 26rpx;" src="../../static/pay/check-zfb.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="queren" :class="{'queren-after':flag==true}" @click="navto">确认代购</view>
	</view>
</template>
<script>
	
	export default {
		components: {},
		data() {
			return {
				flag:false,
				show:300,
				uncheck:true,
				unzfb:true,
				money:'',
				type:null
			};
		},
		// 
		onLoad() {
			
		},
		onShow() {
			
		},
		watch:{
			money: {
				handler(val, oldVal){
					this.money=val.replace(/\b(0+)/gi,"")
				},
				deep:true
			}
		},
		//下拉刷新
		onPullDownRefresh() {},
		methods: {
			choise(e){
				this.show=e
				this.money=this.show
			},
			checkCard(){
				this.uncheck=false
				this.unzfb=true
				this.flag=true
				this.type=0
			},
			checkZfb(){
				this.unzfb=false
				this.uncheck=true
				this.flag=true
				this.type=1
			},
			input(){
				console.log(this.money)
				if(this.money<0){
					this.money=0
					this.show=300
					return
				}
				this.show=0
			},
			navto(){
				if(this.flag==false){
					this.msg("请选择支付方式","none")
				}else{
					if(this.show!=0){
						uni.navigateTo({
							url:"/pages/user/chPay?type="+this.type+"&money="+this.show
						})
					}else{
						if(this.money>0){
							console.log(this.money)
							uni.navigateTo({
								url:"/pages/user/chPay?type="+this.type+"&money="+this.money
							})
						}else{
							this.msg("选择或输入有效金额","none")
						}
					}
				}
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	.invest-text{
		margin-left: 30rpx;
		margin-top: 40rpx;
		font-size: 26rpx;
		font-weight: 300;
		color: #999999;
	}
	.input-box{
		display: flex;
		align-items: center;
		border-bottom: 1px solid #D5D5D5;
		padding-bottom: 24rpx;
		width: 690rpx;
		margin: 30rpx auto;
		font-size: 36rpx;
		font-weight: 400;
		color: #333333;
		input{
			padding-left: 30rpx;
		}
	}
	.quick{
		margin: 55rpx 0 0 30rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}
	.quick-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		margin: 30rpx auto;
	}
	.list{
		width: 153rpx;
		height: 66rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 8rpx;
		text-align: center;
		line-height: 66rpx;
		font-size: 32rpx;
		color: #333333;
	}
	.list-after{
		background: #F0812D;
		color: #FFFFFF;
		border: none;
	}
	.invest-style{
		margin-left: 30rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
		color: #333333;
	}
	.bankcard{
		width: 690rpx;
		height: 88rpx;
		border: 1px solid #008573;
		opacity: 0.5;
		border-radius: 44rpx;
		margin: 30rpx auto;
		display: flex;
		align-items: center;
		padding-left: 55rpx;
		image{
			width: 32rpx;
		}
	}
	.card{
		font-size: 32rpx;
		color: #008573;
		opacity: 0.3;
		margin-left: 30rpx;
	}
	.check{
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background-color: #008573;
		opacity: 0.3;
		margin-left: 414rpx;
	}
	.zfb{
		width: 690rpx;
		height: 88rpx;
		border: 1px solid #4DB6FF;
		opacity: 0.5;
		border-radius: 44rpx;
		margin: 30rpx auto;
		display: flex;
		align-items: center;
		padding-left: 55rpx;
		image{
			width: 32rpx;
		}
	}
	.zfb-pay{
		font-size: 32rpx;
		color: #4DB6FF;
		margin-left: 30rpx;
	}
	.check-zfb{
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background-color: #4DB6FF;
		margin-left: 350rpx;
	}
	.queren{
		width: 460rpx;
		height: 88rpx;
		background: #F0812D;
		opacity: 0.3;
		border-radius: 8rpx;
		margin: 50rpx auto;
		font-size: 30rpx;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.queren-after{
		opacity: 1 !important;
		// background: #F0812D !important;
	}
</style>
